<template>
    <div class="schedule-actions">
      <div class="schedule-content" @click.stop="toggleMenu">
        <slot></slot>
      </div>
      
      <transition name="el-zoom-in-top">
        <div 
          v-if="showMenu" 
          class="action-menu"
          v-click-outside="closeMenu"
        >
          <el-button 
            size="mini" 
            icon="el-icon-edit" 
            @click.stop="handleEdit"
          >编辑</el-button>
          <el-button 
            size="mini" 
            type="danger" 
            icon="el-icon-delete" 
            @click.stop="handleDelete"
          >删除</el-button>
        </div>
      </transition>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      schedule: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        showMenu: false
      }
    },
    methods: {
      toggleMenu() {
        this.showMenu = !this.showMenu
      },
      closeMenu() {
        this.showMenu = false
      },
      handleEdit() {
        this.closeMenu()
        this.$emit('edit', this.schedule)
      },
      handleDelete() {
        this.closeMenu()
        this.$emit('delete', this.schedule)
      }
    },
    directives: {
      'click-outside': {
        bind(el, binding, vnode) {
          el.clickOutsideEvent = function(event) {
            if (!(el === event.target || el.contains(event.target))) {
              vnode.context[binding.expression](event)
            }
          }
          document.body.addEventListener('click', el.clickOutsideEvent)
        },
        unbind(el) {
          document.body.removeEventListener('click', el.clickOutsideEvent)
        }
      }
    }
  }
  </script>
  
  <style scoped>
  .schedule-actions {
    position: relative;
    cursor: pointer;
  }
  
  .action-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    background: #fff;
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 5px;
  }
  
  .el-button--mini {
    padding: 5px 8px;
  }
  </style>